<template>
    <transition name="fade">
        <div class="mfa-status-feedback" :class="status">
            <div class="status-icon">
                <i :class="iconClass"></i>
            </div>
            <div class="status-content">
                <h3 class="status-title">{{ title }}</h3>
                <p class="status-message">{{ message }}</p>
                <div class="status-actions" v-if="showActions">
                    <slot name="actions">
                        <el-button type="primary" @click="$emit('done')" size="small">确定</el-button>
                    </slot>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    name: 'MfaStatusFeedback',
    props: {
        status: {
            type: String,
            default: 'success',
            validator: value => ['success', 'error', 'loading'].includes(value)
        },
        title: {
            type: String,
            default: ''
        },
        message: {
            type: String,
            default: ''
        },
        showActions: {
            type: Boolean,
            default: true
        }
    },
    computed: {
        iconClass() {
            const icons = {
                success: 'el-icon-success',
                error: 'el-icon-error',
                loading: 'el-icon-loading'
            };
            return icons[this.status] || icons.success;
        }
    }
}
</script>

<style lang="scss" scoped>
.mfa-status-feedback {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px;

    .status-icon {
        font-size: 64px;
        margin-bottom: 24px;

        i {
            display: inline-block;
        }
    }

    .status-content {
        width: 100%;
    }

    .status-title {
        font-size: 20px;
        font-weight: 600;
        margin: 0 0 16px;
    }

    .status-message {
        font-size: 15px;
        line-height: 1.6;
        margin: 0 0 24px;
        color: var(--text-secondary, #606266);
    }

    .status-actions {
        margin-top: 24px;
    }

    &.success {
        .status-icon {
            color: #67c23a;
        }

        .status-title {
            color: #67c23a;
        }
    }

    &.error {
        .status-icon {
            color: #f56c6c;
        }

        .status-title {
            color: #f56c6c;
        }
    }

    &.loading {
        .status-icon {
            color: #409eff;
        }

        .status-title {
            color: #409eff;
        }
    }
}

// 进入/离开动画
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
    transform: translateY(10px);
}

// 暗色模式适配
@media (prefers-color-scheme: dark) {
    .mfa-status-feedback {
        .status-message {
            color: var(--text-secondary-dark, #a0a0a0);
        }
    }
}

.dark-mode {
    .mfa-status-feedback {
        .status-message {
            color: var(--text-secondary-dark, #a0a0a0);
        }
    }
}
</style>